<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">


<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Admin Base - Documentation</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- CSS : implied media="all" -->
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/grid.css" rel="stylesheet" type="text/css" />
<link href="../css/base.css" rel="stylesheet" type="text/css" />
<link href="../css/forms.css" rel="stylesheet" type="text/css" />
<link href="../css/lists.css" rel="stylesheet" type="text/css" />
<link href="../css/gallery.css" rel="stylesheet" type="text/css" />
<link href="../css/calendar.css" rel="stylesheet" type="text/css" />
<!-- Theme  -->

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="../js/modernizr-1.5.min.js"></script>
<link href="syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
<script src="syntaxhighlighter/scripts/shCore.js"></script>
<script src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<link href="syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>
</head>

<body class="sidebar-left docs">


<!-- header -->
<div class="header-middle">
<h1>Admin Base - Documentation</h1>
</div>
<!-- header end -->
<div id="page">
  <aside>
    <div class="border-bottom margin-bottom margin-top">
      <h2>Contents</h2>
    </div>
    <br />
    <ul class="filetree">
      <li><a href="index.html"><img src="../img/icons/16/information.png">About</a></li>
      <li><a href="files.html"><img src="../img/icons/16/page_white_stack.png">Files</a></li>
      <li><span class="folder">Template Structure</span>
        <ul>
          <li><a href="template.html#html">HTML5</a></li>
          <li><a href="template.html#grid">Fluid Grid</a></li>
          <li><a href="template.html#fonts">Fonts</a></li>
          <li><a href="template.html#special">Special Pages</a></li>
        </ul>
      </li>
      <li class="closed"><span class="folder">CSS Elements</span>
        <ul>
          <li><a href="css.html#generic">Generic Classes</a></li>
          <li><a href="css.html#blocks">Content Blocks</a></li>
          <li><a href="css.html#calendar">Calendar</a></li>
          <li><a href="css.html#list">Lists</a></li>
          <li><a href="css.html#form">Forms</a></li>
          <li><a href="css.html#gallery">Gallery</a></li>
        </ul>
      </li>
      <li class="closed"><span class="folder">Functions</span>
        <ul>
          <li><a href="functions.html#sidebar">Sidebar</a></li>
          <li><a href="functions.html#tooltips">Toolips</a></li>
          <li><a href="functions.html#tabs">Tabs</a></li>
          <li><a href="functions.html#charts">Charts</a></li>
        </ul>
      </li>
      <li><a href="credits.html"><img src="../img/icons/16/asterisk_yellow.png">Credits</a></li>
    </ul>
  </aside>
  <div id="page-content" class="container_12"> <a href="#" id="open_sidebar">Open Sidebar</a>
    <div id="page-header">
      <h2>Documentation - Template Structure</h2>
    </div>
    <section class="grid_12">
      <h3><a id="html">HTML5</a></h3>
      <p>This template uses the HTML5 Boilerplate framework for a rock solid base to support the template. I recommend watching this screencast by Paul Irish which walks you through the basic setup: <a href="http://net.tutsplus.com/tutorials/html-css-techniques/the-official-guide-to-html5-boilerplate/">http://net.tutsplus.com/tutorials/html-css-techniques/the-official-guide-to-html5-boilerplate/</a>. Please note that not all the functions of the boilerplate have been used. Some redundant aspects have been removed for convince.</p>
      <p>Whereas HTML5 brings a lot of new advanced features (geolocation, drag and drop, local storage etc) this template mainly utilizes the new markup. What's the difference? Well instead of writing a div with an id of nav or sidebar, we can just use their HTML5 counterparts instead. It reduces markup and feature-proofs your website. </p>
      <h3><a id="grid">Fluid Grid</a></h3>
      <p>The built in dynamic grid makes it easy to position content in flexible columns. The main page is setup so you can use grids straight away. Here are a few examples to get you started:</p>
      <h4>2 Column Grid</h4>
      <p>In this template we use the new HTML5 section tag to denote a grid area. Grid sections must add up to 12 to fill up the avilable space. In these examples I've used the build in content blocks as an example. They are not required to make the grid system work.</p>
      <section class="grid_5"> 
        <script type="syntaxhighlighter" class="brush: xml"><![CDATA[
<section class="grid_6">
            <div class="box-header">
              Box One
            </div>
            <div class="box"> Column One </div>
        </section>
        <section class="grid_6">
            <div class="box-header">
              Box Two
            </div>
            <div class="box"> Column Two </div>
        </section>

]]></script> 
      </section>
      <section class="grid_7">
        <section class="grid_6">
            <div class="box-header">
              Box One
            </div>
            <div class="box"> Column One </div>
        </section>
        <section class="grid_6">
            <div class="box-header">
              Box Two
            </div>
            <div class="box"> Column Two </div>
        </section>
      </section>
      <br class="cl" />
      <br />
      <p class="border-top">Note: Always remember to use the clearing class after each row otherwise you will run into positioning issues.</p>
      <h3>3 Column Grid</h3>
      <section class="grid_5"> 
        <script type="syntaxhighlighter" class="brush: xml"><![CDATA[
        <section class="grid_4">
            <div class="box-header">
              Box One
            </div>
            <div class="box"> Column One </div>
        </section>
        <section class="grid_4">
            <div class="box-header">
              Box Two
            </div>
            <div class="box"> Column Two </div>
        </section>
        <section class="grid_4">
            <div class="box-header">
              Box Two
            </div>
            <div class="box"> Column Two </div>
        </section>

]]></script> 
      </section>
      <section class="grid_7">
        <section class="grid_4">
            <div class="box-header">
              Box One
            </div>
            <div class="box"> Column One </div>
        </section>
        <section class="grid_4">
            <div class="box-header">
              Box Two
            </div>
            <div class="box"> Column Two </div>
        </section>
        <section class="grid_4">
            <div class="box-header">
              Box Two
            </div>
            <div class="box"> Column Two </div>
        </section>
      </section>
      <br class="cl" />
      <br />
      <h3>More Complex Grids</h3>
      <p></p>
      <section class="grid_5"> 
        <script type="syntaxhighlighter" class="brush: xml"><![CDATA[

        <section class="grid_2">
            <div class="box-header">
              Box One
            </div>
            <div class="box"> Column One </div>
        </section>
        <section class="grid_10">
            <div class="box-header">
              Box Two
            </div>
            <div class="box">
              <section class="grid_6">
                  <div class="box-header">
                   Box One
                  </div>
                  <div class="box"> Column One </div>

              </section>
              <section class="grid_6">
                  <div class="box-header">
                    Box Two
                  </div>
                  <div class="box"> Column Two </div>
              </section>
              <br class="cl" />
            </div>
        </section>


]]></script> 
      </section>
      <section class="grid_7">
        <section class="grid_2">
            <div class="box-header">
              Box One
            </div>
            <div class="box"> Column One </div>
        </section>
        <section class="grid_10">
            <div class="box-header">
              Box Two
            </div>
            <div class="box">
              <section class="grid_6">
                  <div class="box-header">
                   Box One
                  </div>
                  <div class="box"> Column One </div>

              </section>
              <section class="grid_6">
                  <div class="box-header">
                    Box Two
                  </div>
                  <div class="box"> Column Two </div>
              </section>
              <br class="cl" />
            </div>
        </section>
      </section>
      <br class="cl" />
      <br />
      <h3><a id="fonts">Fonts</a></h3>
      <p>For cross-browser consistency this template uses percentages to control the font size. 13px equals 100%. Below is a reference table to translate the pixel sizing into percentages.</p>
      <table class="table" cellpadding="0">
        <thead>
          <tr>
            <td>For pixels (px)</td>
            <td>Declare this percent (%)</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>10</td>
            <td class="last">77</td>
          </tr>
          <tr>
            <td>11</td>
            <td>85</td>
          </tr>
          <tr>
            <td>12</td>
            <td>93</td>
          </tr>
          <tr>
            <td>13</td>
            <td>100</td>
          </tr>
          <tr>
            <td>14</td>
            <td>108</td>
          </tr>
          <tr>
            <td>15</td>
            <td>116</td>
          </tr>
          <tr>
            <td>16</td>
            <td>123.1</td>
          </tr>
          <tr>
            <td>17</td>
            <td>131</td>
          </tr>
          <tr>
            <td>18</td>
            <td>138.5</td>
          </tr>
          <tr>
            <td>19</td>
            <td>146.5</td>
          </tr>
          <tr>
            <td>20</td>
            <td>153.9</td>
          </tr>
          <tr>
            <td>21</td>
            <td>161.6</td>
          </tr>
          <tr>
            <td>22</td>
            <td>167</td>
          </tr>
          <tr>
            <td>23</td>
            <td>175</td>
          </tr>
          <tr>
            <td>24</td>
            <td>182</td>
          </tr>
          <tr>
            <td>25</td>
            <td>189</td>
          </tr>
          <tr>
            <td>26</td>
            <td>197</td>
          </tr>
        </tbody>
      </table>
      <br />
      <h3><a id="special">Special Pages</a></h3>
      <p>Admina template comes with several extra pages in addition to the example pages.</p>
      <dl class="definition">
        <dt>Login</dt>
        <dd>User login interface</dd>
        <dt>404 Error</dt>
        <dd> 404 page template (can easily be modified for other types of errors).</dd>
      </dl>
    </section>
    <br class="cl" />
  </div>
</div>

<!-- footer -->
<footer> Copyright ©2010, A <a href="http://iamchrismooney.com">Chris Mooney</a> for <a href="http://themeforest.net?ref=ChrisMooney">Theme Forest</a>. </footer>
<!-- footer end --> 

<!-- Javascript at the bottom for fast page loading --> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<!-- Grab Google CDN's jQuery + jQuery UI. fall back to local if necessary --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script>!window.jQuery && document.write('<script src="../js/jquery-1.4.2.min.js"><\/script>')</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> 
<script>!window.jQuery && document.write('<script src="../js/jquery-ui-1.8.1.min.js"><\/script>')</script> 
<script type="text/javascript" src="../js/jquery.tipsy.js"></script> 
<script type="text/javascript" src="../js/jquery.treeview.min.js"></script> 
<script type="text/javascript" src="../js/jquery.cookie.js"></script> 
<script type="text/javascript" src="../js/jquery.lightbox-0.5.min.js"></script> 
<script type="text/javascript" src="../js/jquery.wysiwyg.js"></script> 
<script type="text/javascript" src="../js/functions.js"></script> 
<!--[if lt IE 7 ]>
    <script src="js/dd_belatedpng.js"></script>
  <![endif]-->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-587119-24']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>
